<template>
  <div>
    <el-button type="primary" @click="initData" v-if="!data">选择人员</el-button>
    <div v-if="!data">{{ checkItem.username }}</div>
    <el-dialog :title="title" :visible.sync="visible" width="1200px" append-to-body>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-tree v-if="visible" :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
            :filter-node-method="filterNode" ref="tree" default-expand-all highlight-current
            @node-click="handleNodeClick" />
        </el-col>
        <el-col :span="16">
          <el-table v-loading="loading" :data="list" @row-click="handleSelectionChange" height="500"
            ref="multipleTable">
            <el-table-column align="center" width="55" label="选择">
              <template v-slot="scope">
                <el-radio class="radio" :value="multipleSelection" :label="scope.row.id">&nbsp;</el-radio>
              </template>
            </el-table-column>
            <el-table-column label="用户编号" align="center" key="id" prop="id" />
            <el-table-column label="用户名称" align="center" key="username" prop="username" :show-overflow-tooltip="true" />
            <el-table-column label="用户昵称" align="center" key="nickname" prop="nickname" :show-overflow-tooltip="true" />
            <!-- <el-table-column label="身份证号码" align="center" key="idCard" prop="idCard" width="120" /> -->
            <el-table-column label="手机号码" align="center" key="mobile" prop="mobile" width="120" />
          </el-table>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitMenu">确 定</el-button>
        <el-button @click="cancelMenu">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { listUser } from "@/api/system/user"
  import { listSimpleDepts } from "@/api/system/dept"
  import store from "@/store"

  export default {
    name: "taskSetModal",
    props: {
      taskUserId: "",
      taskUserNickname: "",
      title: {
        type: String,
        default: "选择人员",
      },
      defaultProps: {
        type: Object,
        default: () => ({
          label: "name",
        }),
      },
      data: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        visible: false,
        loading: false,
        deptOptions: [],
        list: [],
        multipleSelection: this.taskUserId,
        callback: null,
        checkItem: {
          id: this.taskUserId,
          username: this.taskUserNickname,
        },
      }
    },
    created() {
      this.getDeptList()
    },
    watch: {
      taskUserId: function (newValue) {
        this.checkItem = {
          id: newValue,
          username: this.taskUserNickname,
        }
      },
    },
    methods: {
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      handleNodeClick(data) {
        this.getUserList({ deptId: data.id })
      },
      handleSelectionChange(row) {
        this.multipleSelection = row.id
      },
      getDeptList() {
        listSimpleDepts().then((response) => {
          this.deptOptions.push(
            ...this.handleTree(
              response.data?.map((item) => ({
                ...item,
                disabled: true,
                leaf: true,
              })),
              "id"
            )
          )
        })
      },
      async getUserList(data) {
        this.loading = true
        const response = await listUser({
          ...data,
          pageNo: 1,
          pageSize: 10000,
        })
        this.loading = false
        this.multipleSelection = this.taskUserId
        this.list = response?.data?.list || []
        // this.list = (response?.data?.list || []).filter(item => item.id !== store.getters.userId);
      },
      async submitMenu() {
        if (!this.multipleSelection) {
          return this.$message.error("请先勾选数据")
        }
        this.visible = false
        this.checkItem = this.list.find(
          (item) => item.id === this.multipleSelection
        )
        this.checkItem = {
          ...this.checkItem,
          username: this.checkItem.nickname,
        }
        if (typeof this.callback == "function") {
          this.callback(this.checkItem)
        } else {
          this.$emit("change", this.checkItem)
        }
      },
      cancelMenu() {
        this.visible = false
      },
      async initData(callback) {
        this.callback = callback
        this.visible = true
        await this.getUserList()
      },
    },
  };
</script>
